<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页</title>
    <link rel="stylesheet" type="text/css" href="${bp}/static/css/base.css">
    <script src="${bp}/static/js/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>

<div id="register">
    <h3>欢迎注册账号</h3>
    <form action="${bp}/user?method=register" method="post">
        <p><input  id="username" type="text" name="username" class="input" placeholder="请输入用户名"><span id="msg"></span></p>
        <p><input type="password" name="password" placeholder="请输入密码" class="input"></p>
        <p><input type="text" name="address" placeholder="请输入地址" class="input"></p>
        <p><input type="text" name="tel" placeholder="请输入联系方式" class="input"></p>
        <p><input type="date" name="birth" class="input"></p>
        <p><input type="submit" value="立即注册" class="input"></p>
    </form>
    <span style="color: red">${info}</span>
</div>


<%--
        页面不跳转的前提下  向后台发送请求  异步请求  Ajax    实现用户名的验重操作  jquery
--%>

<script type="text/javascript">

    //什么时候通过ajax向后台发送异步请求  用户名文本框失去焦点时
    $("#username").blur(function () {
        // 获取文本框的值 用于用户名的验证操作  this  js对象   ->  $(this)   jquery
        let  uname = $(this).val();
        // 向后台发送ajax请求   $.ajax({url,data,type,dataType,success})
        <%--$.ajax({--%>
        <%--    url:'${pageContext.request.contextPath}/user?method=checkUserName',  //  后台接口地址--%>
        <%--    data: {username:uname} , // 请求的参数   /user?method=checkUserName&username=admin--%>
        <%--    type:'post', // 请求的方式    get  post--%>
        <%--    dataType:'JSON',  //  后台响应的数据格式是什么格式 json  轻量级的数据交换格式--%>
        <%--    success:function (res) {  // 请求成功   回调函数  res  后台响应的数据--%>
        <%--        //  res  已经进行了隐式的数据类型转换   json  {"msg":"ok","code":200}  -> object   {msg: 'ok', code: 200}--%>
        <%--        // console.log(res.msg)--%>
        <%--        // console.log(res.code)--%>

        <%--        // 根据响应的数据 作出对应的处理--%>
        <%--        if(res.code==200){--%>
        <%--            $("#msg").text("用户名可用")--%>
        <%--            $(":submit").attr("disabled",false);--%>
        <%--        }else{--%>
        <%--            $("#msg").text("用户名不可用")--%>
        <%--            //阻止用户注册请求的提交  将提交按钮置为不可点击--%>
        <%--            $(":submit").attr("disabled",true);--%>
        <%--        }--%>
        <%--    }--%>
        <%--})--%>

        //  发送get方式的ajax请求  $.get(url,data,function,json)
        $.get("${bp}/user?method=checkUserName",{username:uname},function (res) {
            if(res.code==200){
                $("#msg").text("用户名可用")
                $(":submit").attr("disabled",false);
            }else{
                $("#msg").text("用户名不可用")
                //阻止用户注册请求的提交  将提交按钮置为不可点击
                $(":submit").attr("disabled",true);
            }
        },"JSON")


        // 发送post请求  $.post(url,data,function,json)
        <%--$.post("${pageContext.request.contextPath}/user?method=checkUserName",{username:uname},function (res) {--%>
        <%--    if(res.code==200){--%>
        <%--        $("#msg").text("用户名可用")--%>
        <%--        $(":submit").attr("disabled",false);--%>
        <%--    }else{--%>
        <%--        $("#msg").text("用户名不可用")--%>
        <%--        //阻止用户注册请求的提交  将提交按钮置为不可点击--%>
        <%--        $(":submit").attr("disabled",true);--%>
        <%--    }--%>
        <%--},"JSON")--%>



    })

</script>

</body>
</html>
